﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/css/flick/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <link href="/css/jquery.jnotify.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.jnotify.js" type="text/javascript"></script>
</head>
<body>
    <div id="Notification">
    </div>
    <h1>
        jNotify (JQuery Notification Engine)</h1>
    <div id="StatusBar">
    </div>
    <button id="addStatusBarMessage">
        Add a non permanent message (Status Bar)</button>
    <br />
    <button id="addStatusBarError">
        Add a permanent error (Status Bar)</button>
    <br />
    <br />
    <button id="addNotificationMessage">
        Add a non permanent message (Notification)</button>
    <br />
    <button id="addNotificationError">
        Add a permanent error (Notification)</button>
    <script type="text/javascript">
        $(document).ready(function () {

            // For jNotify Inizialization
            // Parameter:
            // oneAtTime : true if you want show only one message for time
            // appendType: 'prepend' if you want to add message on the top of stack, 'append' otherwise
            $('#StatusBar').jnotifyInizialize({
                oneAtTime: false,
                appendType: 'append'
            })
            $('#Notification')
                .jnotifyInizialize({
                    oneAtTime: false,
                    appendType: 'append'
                })
                .css({ 'position': 'absolute',
                    'marginTop': '20px',
                    'right': '20px',
                    'width': '250px',
                    'z-index': '9999'
                });
            // --------------------------------------------------------------------------

            // For add a notification on button click
            // Parameter:
            // text: Html do you want to show
            // type: 'message' or 'error'
            // permanent: True if you want to make a message permanent
            // disappearTime: Time spent before closing message
            $('#addStatusBarMessage').click(function () {
                $('#StatusBar').jnotifyAddMessage({
                    text: 'This is a non permanent message.',
                    permanent: true
                });
            });

            $('#addStatusBarError').click(function () {
                $('#StatusBar').jnotifyAddMessage({
                    text: 'This is a permanent error.',
                    permanent: true,
                    type: 'error'
                });
            });

            $('#addNotificationMessage').click(function () {
                $('#Notification').jnotifyAddMessage({
                    text: 'This is a non permanent message.',
                    permanent: false
                });
            });

            $('#addNotificationError').click(function () {
                $('#Notification').jnotifyAddMessage({
                    text: 'This is a permanent error.',
                    permanent: true,
                    type: 'error'
                });
            });
            // -----------------------------------------------------
        });
    </script>
</body>
</html>
